<script setup lang="ts">
import {getComponent, getPlaceholder, JQueryFormProps} from "./form.ts";
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import {ref} from "vue";

defineOptions({
  name: "JQueryForm",
})

const props = withDefaults(defineProps<JQueryFormProps>(), {
  loading: false,
  model: {} as any,
  showSubmit: false,
  submitText: "提交",
  labelCol: {span: 7},
})

const expand = ref(false);
const emits = defineEmits(['query'])

const queryRowColumns = props.items.slice(0, 3)
const queryExpandColumns = props.items.slice(3)

function onReset() {
  Object.keys(props.model).forEach((key) => {
    props.model[key] = undefined;
  })
  onQuery()
}

function onQuery() {
  emits('query', props.model)
}
</script>

<template>
  <a-form v-bind="props">
    <a-row :gutter="[15, 0]">
      <template v-for="item in queryRowColumns">
        <a-col :span="8">
          <a-form-item :name="item.dataIndex" :label="item.title">
            <component :is="getComponent(item.type,true)" v-bind="item.props" style="width:100%"
                       v-model:value="props.model[item.dataIndex as string]"
                       :placeholder="getPlaceholder(item)"/>
          </a-form-item>
        </a-col>
      </template>
    </a-row>
    <a-row v-if="expand" :gutter="[15, 0]">
      <template v-for="item in queryExpandColumns">
        <a-col :span="8">
          <a-form-item :name="item.dataIndex" :label="item.title">
            <component :is="getComponent(item.type,true)" v-bind="item.props" style="width:100%"
                       v-model:value="props.model[item.dataIndex as string]"
                       :placeholder="getPlaceholder(item)"/>
          </a-form-item>
        </a-col>
      </template>
    </a-row>
    <a-row :span="24" style="text-align: right">
      <a-col :span="24">
        <a-space>
          <a-button :loading="loading" type="primary" @click="onQuery">
            查询
          </a-button>
          <a-button @click="onReset" :disabled="loading"> 重置</a-button>
          <a-button type="link" @click="expand = !expand">
            {{ expand ? "收起" : "展开" }}
            <UpOutlined v-if="expand"/>
            <DownOutlined v-else/>
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>

<style scoped>

</style>